<template>
  <Fragment>
    <div class="cards-tab">
      <el-radio-group v-model="cardsData.tabActive" @change="handleGet">
        <el-radio-button label="1">球员累计</el-radio-button>
        <el-radio-button label="2">球队累计</el-radio-button>
      </el-radio-group>
      <el-input
        v-model="cardsData.searchVal"
        placeholder="请输入关键字查找"
        class="cards-input"
      >
        <template #append>
          <el-button :icon="Search" @click="handleGet" />
        </template>
      </el-input>
    </div>
    <el-table :data="cardsTableData" border>
      <el-table-column prop="rank" label="排名" width="60" />
      <el-table-column :label="cardsData.tabActive === '1' ? '球员' : '球队'">
        <template #default="scope">
          <div class="team-name">
            {{
              cardsData.tabActive === "1"
                ? scope.row.idName
                : scope.row.teamName
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="playerNumber"
        label="号码"
        v-if="cardsData.tabActive === '1'"
      />
      <el-table-column prop="yellowCard" label="黄牌" />
      <el-table-column prop="redCard" label="红牌" />
    </el-table>
  </Fragment>
</template>
<script lang="ts" setup>
import { onMounted, computed, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getRaceScorePlayer, getRaceScoreTeam } from "@/api/match";
import { useRoute } from "vue-router";

const route = useRoute();
const raceId = ref(0); // 当前赛事的id

const cardsData = reactive({
  tabActive: "1",
  searchVal: "",
  memberData: [
    {
      name: "赵启焱",
      image:
        "https://lysy360-cfa-safe.oss-cn-hangzhou.aliyuncs.com/images/userCert/2022/20221106/2022-11-06_18.19.21-9c34b9a32704c38577b344a522dede3b.png?OSSAccessKeyId=LTAIgH1anZzCfgeE&Expires=1683711905&Signature=DhKrfC9haBc9ASQO3mJF9IBfUSo%3D",
      no: 11,
      team: "江苏足协U14",
      yellow: 1,
      red: 0,
    },
    {
      name: "赵启焱",
      image:
        "https://lysy360-cfa-safe.oss-cn-hangzhou.aliyuncs.com/images/userCert/2022/20221106/2022-11-06_18.19.21-9c34b9a32704c38577b344a522dede3b.png?OSSAccessKeyId=LTAIgH1anZzCfgeE&Expires=1683711905&Signature=DhKrfC9haBc9ASQO3mJF9IBfUSo%3D",
      no: 11,
      team: "江苏足协U14",
      yellow: 1,
      red: 7,
    },
  ],
  groupData: [
    {
      name: "河南足协U14",
      image:
        "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
      yellow: 3,
      red: 4,
    },
    {
      name: "河南足协U14",
      image:
        "https://lysy360-aliyun-oss-test.oss-cn-hangzhou.aliyuncs.com/attachments/other/2023/20230201/2023-02-01_08.48.21-3d4eea07d3467d0f70de072de1dcce6c.png?x-oss-process=style/w200png",
      yellow: 3,
      red: 4,
    },
  ],
});

const cardsTableData = computed(() => {
  return cardsData.tabActive === "1"
    ? cardsData.memberData
    : cardsData.groupData;
});

const handleGet = async () => {
  const res =
    cardsData.tabActive === "1"
      ? await getRaceScorePlayer({
          raceId: raceId.value,
          playerName: cardsData.searchVal,
        })
      : await getRaceScoreTeam({
          raceId: raceId.value,
          playerName: cardsData.searchVal,
        });
  cardsData.tabActive === "1"
    ? (cardsData.memberData = res.data)
    : (cardsData.groupData = res.data);
  cardsData.searchVal = "";
};

onMounted(() => {
  let { id } = route.query;
  raceId.value = Number(id);
  handleGet();
});
</script>

<style lang="scss" scoped>
.team-name {
  display: flex;
  align-items: center;
  img {
    width: 20px;
    margin-right: 5px;
  }
}
.cards-tab {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .cards-input {
    width: 35%;
  }
}
</style>